<template>
  <view class="wh_750 bg_F5F5F5 pageHeight flex flex-column align-center">
    <s-header-title ref="headerTitle" isDisplayBack title="家谱列表" is-fixed background="#FFFFFF"
                    @getPageHeight="getPageHeight" zIndex="10">
    </s-header-title>
    <view :style="{height:page.headerHeight + 'px'}"></view>
    <view class="fs_28 color_9F9F9F fw_500 hW_50 flex align-center justify-center">可长按家谱上下拖动进行排序</view>
    <scroll-view class="wh_750"
                 scroll-y
                 :style="{height:`calc(100vh - ${page.headerHeight}px - 50rpx)`}"
                 :lower-threshold="400"
    >
      <view class="wh_750 flex flex-column align-center">
        <l-drag :list="genealogy.list"
                :column="1"
                gridHeight="394rpx"
                longpress
                @change="genealogyChange($event)"
                @touchStart="genealogytTouchStart($event)"
        >
          <template #grid="{active, index, content}">
            <view class="flex align-center justify-center">
              <view class="genealogy_bg wh_702 hW_374 mt_16 flex"
                    style="border-radius: 21rpx;overflow:hidden;position: relative;"
                    @click.stop="goGenealogicalDetails(content)"
              >
                <view class="genealogy_content flex flex-column align-center flex-sub">
                  <view class="z_1 mt_30 flex justify-between"
                        style="width: 100%;"
                  >
                    <view class="flex flex-column ml_24">
                      <view class="fs_38 color_FFFFFF fw_500">{{ content.title }}</view>
                      <view class="fs_22 fw_400 color_FFFFFF mt_15">家谱号: {{ content.code }}</view>
                      <view class="fs_22 fw_400 color_FFFFFF mt_15">发起人: {{ content.initiator }}</view>
                      <view class="fs_22 fw_400 color_FFFFFF mt_15">
                        创建时间：{{ dayjs(content.add_time * 1000).format('YYYY年MM月DD日') }}
                      </view>
                    </view>
                    <view class="flex flex-column align-end mr_24">
                      <view class="flex align-center">
                        <!-- #ifndef H5 -->
                        <view class="wh_100 hW_49 fs_25 fw_500 flex align-center justify-center"
                              style="background: rgba(255,255,255,0.8);border-radius: 13rpx;color: #000000;"
                        >
                          扫一扫
                        </view>
                        <!-- #endif -->
                        <view class="wh_54 hW_49 flex align-center justify-center ml_30"
                              style="border-radius: 13rpx;background: rgba(255,255,255,0.8)"
                              @click.stop="goGenealogicalManagement(content.id,true)"
                        >
                          <image :src="`${IMG_URL}/genealogy/genealogy_code.png`"
                                 class="wh_31 hW_31"
                          ></image>
                        </view>
                      </view>
                      <view class="fs_34 fw_500 color_FFFFFF mt_38" @click.stop="goGenealogicalManagement(content.id)">
                        设置
                      </view>
                    </view>
                  </view>
                  <view style="width: 100%;" class="ml_50 mt_15">
                    <view class="wh_145 hW_49 z_10 fs_28 fw_500 flex align-center justify-center"
                          style="background: rgba(255,255,255,0.6);border-radius: 29rpx;color: #0F0F0F;"
                    >
                      进入家谱
                    </view>
                  </view>
                  <view class="flex align-center"
                        style="position: absolute;left: 24rpx;bottom: 22rpx"
                  >
                    <view class="fs_24 fw_500"
                          style="color: rgba(255,255,255,0.8)"
                    >
                      总人数: {{ content.total_count }}
                    </view>
                    <view class="fs_24 fw_500 ml_16 mr_16"
                          style="color: rgba(255,255,255,0.8)"
                    >
                      男: {{ content.man_count }}
                    </view>
                    <view class="fs_24 fw_500"
                          style="color: rgba(255,255,255,0.8)"
                    >
                      女: {{ content.women_count }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </template>
        </l-drag>
        <view class="hW_150"></view>
        <view class="anniversaryContent_bottomButtons flex align-center" style="justify-content: space-evenly">
          <view class="anniversaryContent_bottomButton flex align-center justify-center" @click.stop="joinFamilyTree">
            <text class="anniversaryContent_bottomButton_text">加入家谱</text>
          </view>
          <view class="anniversaryContent_bottomButton flex align-center justify-center" @click.stop="newFamilyTree">
            <text class="anniversaryContent_bottomButton_text">新建家谱</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import HeaderTitle from '@/pages/family/components/headerTitle.vue';
  import { computed, reactive } from 'vue';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import dayjs from 'dayjs';
  import FamilyManagement from '@/pages/message/components/familyManagement.vue';
  import LDrag from '@/uni_modules/lime-drag/components/l-drag/l-drag.vue';

  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);

  const page = reactive({
    options: {},
    headerHeight: 0,
    selectGenealogy: {},
  });
  const genealogy = reactive({
    list: [],
  });

  onShow(async () => {
    const { data } = await sheep.$api.genealogy.getGenealogySelect();
    genealogy.list = data.list;
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  function goGenealogicalManagement(id,is_flag = false) {
    sheep.$router.go('/pages/genealogy/genealogicalManagement', { id,is_flag });
  }

  async function goGenealogicalDetails(info) {
    await uni.showLoading({
      title: '加载中...',
      mask: true,
    });
    await sheep.$store('family').setGenealogyTree(info.id);
    await uni.hideLoading();
    await sheep.$router.go('/pages/genealogy/management', {
      id: info.id,
      name: info.title,
      add_time: info.add_time,
      username: info.initiator,
    });
  }

  // 新建家谱
  function newFamilyTree() {
    sheep.$router.go('/pages/genealogy/newFamilyTree');
  }

  // 加入家谱
  function joinFamilyTree() {
    sheep.$router.go('/pages/genealogy/joinFamilyTree');
  }

  async function genealogyChange(e) {
    let arr = [];
    e.forEach(item => {
      arr.push(item.content.id);
    });
    const { data } = await sheep.$api.genealogy.updateGenealogySort({
      genealogy_id: page.selectGenealogy.id,
      ids: arr.join(','),
    });
  }

  function genealogytTouchStart(e) {
    page.selectGenealogy = e;
  }
</script>


<style scoped lang="scss">

  .genealogy_posters {
    width: 702rpx;
    height: 338rpx;
    background: #234B7C;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    //padding: 20rpx 20rpx 18rpx 20rpx;
    position: relative;

    .genealogy_posters_image {
      width: 658rpx;
      height: 270rpx;
      position: absolute;
      top: 0;
      left: 0;
    }

    .genealogy_posters_images {
      width: 319rpx;
      height: 219rpx;
    }

    .genealogy_posters_info {

      .genealogy_posters_info_name {
        max-width: 350rpx;

        .genealogy_posters_info_name_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 36rpx;
          color: #FFFFFF;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .genealogy_posters_info_createdBy {
        .genealogy_posters_info_createdBy_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #FFFFFF;
        }
      }

      .genealogy_posters_info_time {
        .genealogy_posters_info_time_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #FFFFFF;
        }
      }
    }

    .genealogy_posters_line {
      position: absolute;
      left: 170rpx;
      top: 180rpx;
      z-index: 10;
      width: 58rpx;
      height: 7rpx;
      border-radius: 12rpx;
    }
  }

  .anniversaryContent_bottomButtons {
    position: fixed;
    bottom: 40rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 750rpx;
  }

  .anniversaryContent_bottomButton {
    width: 312rpx;
    height: 70rpx;
    background: rgba(255, 66, 6, 0.7);
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    //position: fixed;
    //bottom: 40rpx;
    //left: 50%;
    //transform: translateX(-50%);
    //z-index: 10;

    .anniversaryContent_bottomButton_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }

  .genealogy_bg {
    background: url($uni-bg-url-sq + '/genealogy/genealogy_background.png') no-repeat;
    background-size: 100% 100%;
  }

  .genealogy_contents {
    background: url($uni-bg-url-sq + '/genealogy/genealogy_shu.png') 140rpx 193rpx no-repeat;
    background-size: 342rpx 286rpx;
    height: 100%;
  }

  .genealogy_content {
    background: url($uni-bg-url-sq + '/genealogy/genealogy_shu.png') 329rpx 110rpx no-repeat;
    background-size: 254rpx 213rpx;
    height: 100%;
  }
</style>
